<template>
  <div class="app-container">
    <el-form ref="item" label-width="200px">
      <el-row>
        <div class="top-box">
          <div class="box">
            <el-form-item
              v-for="item in item"
              :key="item._id"
              :label="item.name">
              {{ item.value }}
            </el-form-item>
          </div>
        </div>
      </el-row>
    </el-form>
    <div class="title">订单信息</div>
    <el-form ref="order" label-width="200px">
      <el-row>
        <el-form-item
          v-for="item in order"
          :key="item._id"
          :label="item.name">
          {{ item.value }}
        </el-form-item>
      </el-row>
    </el-form>
    <div class="title">商家信息</div>
    <el-form ref="bus" label-width="200px">
      <el-row>
        <el-form-item
          v-for="item in business"
          :key="item._id"
          :prop="item.value"
          :label="item.name">
          {{ item.value }}
        </el-form-item>
      </el-row>
    </el-form>
    <el-button type="info" @click="back">返回</el-button>
  </div>
</template>

<script>
import { validateOrderStatus,Excel,payType } from '@/utils/validate'
import { formatDate,toDate } from '@/utils/index'
import request from '@/utils/request'
export function getList(mes) {
  return request({
    url: '/v1/admin/order',
    method: 'post',
    data: mes
  })
}
export default {
  data(){
    return{
      form: [],
      item: '',
      order: '',
      business: ''
    }
  },
  created: function () {
    const n = JSON.parse(localStorage.getItem('finList'))
    console.log(n);
    const item = [
      { name: '结算状态', value: this.sState(n.order_settlement_status) },
      { name: '结算时间', value: n.order_settlement_time ? formatDate(new Date(item.order_settlement_time * 1000), 'yyyy-MM-dd hh:mm') : '无' },
      { name: '结算总金额', value: 'id' },
      { name: '订单金额', value: n.order_money || '--' },
      { name: '打赏金额', value: n.reward_money || '--' },
      { name: '结算账户', value: n.service_business_id ?  n.service_business_id.business_bank_account : '--' },
      { name: '开户行', value: n.service_business_id ? n.service_business_id.enterprise_opening_bank : '--' },
      { name: '结算人', value: 'person' },
    ]
    const order = [
      { name: '订单编号', value: '' },
      { name: '下单时间', value: n.order_time ? formatDate(new Date(n.order_time * 1000), 'yyyy-MM-dd hh:mm') : '--' },
      { name: '订单金额', value: n.order_money || '--' },
      { name: '打赏金额', value: n.reward_money || '--' },
      { name: '支付方式', value: payType(n.order_pay_type) || '--' },
      { name: '打赏时间', value: n.reward_time ? formatDate(new Date(n.reward_time * 1000), 'yyyy-MM-dd hh:mm') : '--' },
      { name: '支付时间', value: n.pay_time ? formatDate(new Date(n.pay_time * 1000), 'yyyy-MM-dd hh:mm') : '--' },
      { name: '第三方交易号', value: n.thirdy_pay_order || '--' },
      { name: '成团时间', value: '' },
      { name: '平台派单时间', value: n.send_order_time ? formatDate(new Date(n.send_order_time * 1000), 'yyyy-MM-dd hh:mm') : '--' },
      { name: '商家派单时间', value: n.business_send_order_time ? formatDate(new Date(n.business_send_order_time * 1000), 'yyyy-MM-dd hh:mm') : '--' },
      { name: '服务人员上门时间', value: ''  },
      { name: '确认服务人员上门时间', value: n.user_confim_service_personal_time ? formatDate(new Date(n.user_confim_service_personal_time * 1000), 'yyyy-MM-dd hh:mm') : '--'  },
      { name: '服务人员确认订单时间', value: '' },
      { name: '开始服务时间', value:  n.service_time ? formatDate(new Date(n.service_time * 1000), 'yyyy-MM-dd hh:mm') : '--' },
      { name: '服务人员服务结束时间', value: '' },
      { name: '订单完成时间', value: n.user_confim_complete_service_time || '--' },
    ]
    const business = [
      { name: '商家名称', value: n.service_business_name || '--' },
      { name: '商家地址', value: '' },
      { name: '商家联系人', value: '' },
      { name: '商家联系方式', value: '' },
    ]
    this.item = item
    this.order = order
    this.business = business
  },
  methods: {
    exportExcel() {
      Excel('#out-table')
    },
    back() {
      this.$router.go(-1)
    },
    sState(n) {
      if(n == '1'){
        return '未结算'
      }else if(n == '2'){
        return '已结算'
      }else {
        return '--'
      }
    }
  }
}
</script>

<style scoped>
  .el-form-item{
    margin: 0;
  }
  .el-steps{
    margin: 20px 0;
  }
  .title {
    line-height: 30px;
    font-weight: bold;
    border-left: 5px solid #a2c33d;
    padding-left: 10px;
    margin: 5px;
  }
  .top-box{
    background: #eaf4fd;
    border: 1px solid #d4e4f3;
    display: flex;
    flex-wrap: wrap;
  }
  .box{
    width: 45%;
  }
  .state{
    width: 10%;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
    display: inline-block;
  }
  .footer{
    line-height: 30px;
    font-weight: 600;
    margin-top: 20px;
    border-bottom: 1px solid #d4d4d4;
  }
  .footer div{
    display: inline-block;
    width: 120px;
    text-align: center;
  }
  .footer div:hover{
    background: #d4e4f3;
  }
  .two{
    display: none;
  }
  .footer .active{
    background: #d4e4f3;
  }
  .block{
    display: flex;
    justify-content: space-between;
    padding: 10px;
  }
</style>
